<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>国内折扣详情</title>
</head>
<link rel="stylesheet" href="css/couponproduct.css">
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.js"></script>
<script src="js/template.js"></script>
<script src="lib/jquery/jquery.js"></script>
<script src="js/couponproduct.js"></script>

<script type="text/html" id="template">
    {{if result}}
    {{each result as value}}
    <ul class="clearfix">
        <li Id="p_{{value.couponProductId}}" class="quan">{{#value.couponProductImg}}</li>
        <li>
            <p class="couponProductName">{{value.couponProductName}}</p>
            <p>{{value.couponProductPrice}}</p>
            <p class="couponProductTime">{{value.couponProductTime}}</p>
        </li>
    </ul>
    {{/each}}
    {{/if}}
</script>
<script type="text/html" id="templat">
    {{if result}}
    {{each result as value}}
    {{#value.couponProductImg}}
    {{/each}}
    {{/if}}
</script>
<body>
<!--遮罩-->
<div class="zhezhao">
        <span class="zuo"> < </span>
        <div class="pic">
            <div id="move"></div>
        </div>
        <span class="you"> > </span>
</div>
<!--顶部-->
<div class="shen clearfix ">
    <a href="coupon.html" class="glyphicon glyphicon-chevron-left fl"></a>
    <div class="fl">优惠券</div>
    <img src="images/header_app.png" alt="" class="fr">
</div>
<!--提示-->

<div class="tishi">-点餐前出示手机中优惠券，立即享受优惠 </div>
<!--商品-->
<div class="main">

</div>


<!--底部-->
<ul class="na clearfix" role="tablist">
    <li><a href="#">登陆</span></a></li>
    <li><a href="#">注册</a></li>
    <li><a href="#">返回顶部 </a></li>
</ul>
<div class="gong">手机APP下载<a href=""> 慢慢买手机版 --掌上比价平台</a>
    <p>m.m.maimai.com</p>
</div>
</body>
<script>
    $.ajax({
        type: 'get',
        url: 'http://192.168.23.81:3000/api/getcouponproduct' + location.search,
        dataType: 'json',
        success: function (data) {
            console.log(data);
            var html = template("template", data)
            $(".main").html(html)
            $(".main .quan").on("click", function () {
                $(".zhezhao").css("display", "block")
                var html = template("templat", data)
                $(".pic div").html(html)
                console.log(  parseInt(this.id.split("_")[1]));
                var num= parseInt(this.id.split("_")[1]);
                var dis=num*200;
                $("#move").css("transform","translateX(-"+dis+"px)");
                $(".you").on("click",function () {
                     num += 1;
                    dis=num*200
                    $("#move").css("transform","translateX(-"+dis+"px)");
                    if(num==$(".quan").length-1){
                        num=0
                    }
                    return false
                })
                $(".zuo").on("click",function () {
                    num -= 1;
                    dis=num*200
                    $("#move").css("transform","translateX(-"+dis+"px)");
                    if(num==0){
                        num = $(".quan").length - 1;
                    }
                    return false
                })
            });
        }
    });
    $(".zhezhao").click(function () {
        this.style.display = "none";
    })
    $(".pic").click(function () {
        return false
    })
</script>
</html>